﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas下雨动画-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
 html {
	width:100%;
}
body {
	width:100%;
	margin:0;
	padding:0;
	background-color:#000;
}
.rain {
	display:block;
}
embed {
	display:block;
}
</style>
</head>
<body>
<canvas class="rain"></canvas>
<script>
 var oCanvas = document.querySelector(".rain"); //获取元素rain
 var w, h; //定义变量w ,h
 var aRain = []; //用来存放新生成的雨滴

 ~~ function() { //自执行函数:不用调用自己执行 把canvas和整个屏幕无缝贴合
     window.onresize = arguments.callee; //随着浏览器的变化宽和高都变化
     w = window.innerWidth; //获取浏览器的宽
     h = window.innerHeight; //获取浏览器的高
     oCanvas.width = w; //把值赋给canvas
     oCanvas.height = h; //把值赋给canvas
 }();

 function random(min, max) { //定义随机函数
     return Math.random() * (max - min) + min; //返回想要的任意的值
 }

 var canCon = oCanvas.getContext("2d"); //创建一个2d画笔

 Rain.prototype = { //this 指代当前函数
     init: function() { //雨滴的基本参数
         this.x = random(0, w); //雨滴横坐标
         this.y = 0; //纵坐标
         this.w = random(1.6, 3); //雨滴的 宽度 1.6px 到 2.5px
         this.h = random(8, 15); //雨滴的 长度8px 到 15px
         this.color = "#3ff"; //颜色
         this.vy = random(1.2, 2.3); //下降速度
         this.vr = random(0.5, 1.5); //绽放速度
         this.ground = random(0.8 * h, 0.9 * h); //雨滴绽放的位置
         this.r = this.w / 2; //圆的半径
     },
     draw: function() { //把基本参数变化成雨滴效果
         if (this.y < this.ground) //如果雨滴y坐标小于绽放位置,就一直下落
         {
             canCon.beginPath(); //抬笔
             canCon.fillStyle = this.color; //用画笔蘸颜色画雨滴
             canCon.fillRect(this.x, this.y, this.w, this.h); //画矩形区域左上角的坐标 矩形的宽 高
         } else //绽放的圆形区域
         {
             canCon.beginPath(); //抬笔 雨滴停止下落
             canCon.strokeStyle = "rgba(50,250,250,0.96)"; //空心画笔 rgba() rgb是颜色  a是透明度
             canCon.arc(this.x, this.y, this.r, 0, Math.PI * 2); //画圆形 圆心坐标 半径 画多少(弧度制)
             canCon.stroke(); //下笔作画
         }

     },
     move: function() { //移动函数:设置怎么移动

         if (this.y < this.ground) //如果雨滴的y坐标小于定义的地面高度  则雨滴往下移动
         {
             this.y += this.vy; //让每个雨滴下降速度不同
         } else //如果大于  就绽放
         {
             if (this.r < 100) //绽放半径
             {
                 this.r += this.vr; //让每个雨滴绽放速度不同
             } else {
                 this.init(); //循环雨滴:重新设置雨滴,重头再来 循环
             }

         }

         this.draw(); //调用draw函数
     }
 };



 function Rain() {} //雨滴的模板
 //创建num个雨滴
 function createRain(num) { //参数为创建多少雨滴
     for (let i = 0; i < num; i++) //let 为立执行
     {
         setTimeout(function() { //创建num个雨滴的定时器
             var rain = new Rain(); //创建雨滴对象 创建什么样的雨滴 : 调用init函数 draw函数
             rain.init();
             rain.draw();
             aRain.push(rain); //把雨滴放在aRain里边, 目的是 循环他
         }, 200 * i); //时间200*i目的是为了让每个雨滴下落时间不同  单位为毫秒

     }
 }


 setInterval(function() { //下落运动的定时器
     canCon.fillStyle = "rgba(0,0,0,0.04)"; //遮盖层,透明度递减,让画的矩形看起来更像雨滴
     canCon.fillRect(0, 0, w, h); //画矩形
     for (var item of aRain) //遍历num个雨滴
     {
         item.move(); //把遍历后的雨滴都执行move函数 运动起来
     }
 }, 1000 / 90); //单位为毫秒


 createRain(70); //方法入口  下多少雨滴
</script>

</body>
</html>
